<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>image-placeholder.js DEMO</title>
    <link rel="stylesheet" href="css/main.css">
    <style type="text/css">
        .text {
            margin:0;
            padding:5px;
            border:0;
            width:70px;
            height:20px;
            background:#eee;
            line-height:20px;
            outline:none;
        }
        .picker {
            margin:0;
            padding:5px;
            border:0;
            width:70px;
            height:20px;
            border-right:30px solid green;
            background:#eee;
            line-height:20px;
            outline:none;
        }
        #placeholder-demo,#placeholder-generator{
            padding: 5% 10%;
        }
        #placeholder-generator img {
            margin:0 auto;
            display: block;
            max-width:100%;
        }
        .input-box {
            float: left;
            margin-left:15px;
            margin-right:15px;
        }
        .input-placeholder{
            display:block;
            font-size:24px;
            color:#666;

        }
        #select-fstyle{
            width:100px;
            height: 30px;
            color:#999;
        }
        #select-fstyle option{
            color:#999;
            background: #eee;
            border:none;
        }
        .open-select {
            background:#ccc;
            width: 30px;
            height: 30px;
            position: relative;
            border:none;
            outline:none;
            float:right;
        }
        .options {
            position: absolute;
            left:-80px;
            right:0;
            top:30px;
            color:#999;
            background: #f5f5f5;
            display: none;
            text-align: left;
        }
        .options li{
            padding:5px 10px;
        }
        .options li:hover {
            background: #1e90ff;
            color:#fff;
            cursor: pointer;
        }
        .options li {
            border-bottom:1px solid #eee;
        }

        .triangle-down {
            position: absolute;
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 6px solid #000;
            top:12px;
            left:12px;
        }

        #text {
            width:300px;
        }

    </style>
    <script type="text/javascript" src="js/placeholder.min.js"></script>

    <!--颜色选择-->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/colpick.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/colpick.css" type="text/css"/>
</head>

<body>
<div class="container">
    <div class="con">
        <div class="title"><h1><a href="../">placeholder.js</a></h1></div>
        <hr/>

        <h2>Image Generator</h2>
        <div id="placeholder-generator"><img id="generat-img"></div>
        <div class="clearfix" id="input-box" style="margin-bottom: 50px;">
            <div class="input-box">
                <span class="input-placeholder">Size:</span>
                <input placeholder="width" type="text" class="text" data-action="widthChange"/>
                <span>x</span>
                <input placeholder="height" type="text" class="text" data-action="heightChange"/>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Bgcolor:</span>
                <input placeholder="background" type="text" class="picker" data-action="bgcolorChange"/>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Color:</span>
                <input placeholder="textcolor" type="text" class="picker" data-action="colorChange"/>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Fstyle:</span>
                <select id="select-fstyle" class="text" data-action="fstyleChange">
                    <option value="normal">normal</option>
                    <option value="italic">italic</option>
                    <option value="oblique" selected="selected">oblique</option>
                </select>
            </div>
            <div  class="input-box">
                <span class="input-placeholder">Fweight:</span>
                <input placeholder="weight" id="fweigth-input" type="text" class="text" data-action="fweightChange" value="bold"/>
                <button class="open-select">
                    <span class="triangle-down"></span>
                    <ul class="options">
                        <li>normal</li>
                        <li>bold</li>
                        <li>bolder</li>
                        <li>lighter</li>
                    </ul>
                </button>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Fsize:</span>
                <input placeholder="font-size" type="text" class="text" data-action="fsizeChange"/>
                <button class="open-select">
                    <span class="triangle-down"></span>
                    <ul class="options">
                        <li>12</li>
                        <li>14</li>
                        <li>18</li>
                        <li>24</li>
                        <li>30</li>
                        <li>36</li>
                        <li>48</li>
                        <li>60</li>
                        <li>72</li>
                    </ul>
                </button>
            </div>

            <div class="input-box">
                <span class="input-placeholder">Ffamily:</span>
                <input placeholder="font" type="text" class="text" data-action="ffamilyChange"/>
                <button class="open-select">
                    <span class="triangle-down"></span>
                    <ul class="options">
                        <li>Helvetica</li>
                        <li>Arial</li>
                        <li>Lucida Grande</li>
                        <li>Verdana</li>
                        <li>Tahoma</li>
                        <li>Trebuchet MS</li>
                        <li>Georgia</li>
                        <li>Times</li>
                        <li>宋体</li>
                        <li>微软雅黑</li>
                        <li>华文细黑</li>
                        <li>黑体</li>
                    </ul>
                </button>
            </div>
            <div class="input-box">
                <span class="input-placeholder">Text:</span>
                <input placeholder="text" type="text" id="text" class="text" data-action="textChange"/>
            </div>
        </div>
        <hr/>
        <h2>Usage</h2>

        <h5>Include placeholder.js in your HTML:</h5>
        <pre style="margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;script</span> <span style="color:#00c">src</span>=<span style="color:#a11">"placeholder.js"</span><span style="color:#170">&gt;</span><span style="color:#170">&lt;/script</span><span style="color:#170">&gt;</span></pre>
        <img class="placeholder">

        <h5>Holder will then process all images with a specific src attribute, like this one:</h5>
        <pre style="margin:20px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ddd 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;img</span> <span style="color:#00c">class</span>=<span style="color:#a11">"placeholder"</span> <span style="color:#170">/&gt;</span></pre>
        <img options="size=256x128&text=Hello!" class="placeholder" />

        <h5>or with options setting:</h5>
        <pre style="margin:20px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ddd 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;img</span> <span style="color:#00c">options</span>=<span style="color:#a11">"size=256x128&amp;text=Hello!"</span> <span style="color:#00c">class</span>=<span style="color:#a11">"placeholder"</span> <span style="color:#170">/&gt;</span></pre>
        <img options="size=256x128&text=Hello!" class="placeholder" />

        <h5>Programmatic use API to process image with a specific src attribute, like this one:</h5>
        <pre style="margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;img</span> <span style="color:#00c">src</span>=<span style="color:#a11">"image_origin.png"</span> <span style="color:#00c">onerror</span>=<span style="color:#a11">"this.src=placeholder.getData({text: 'Image 404'})"</span><span style="color:#170">&gt;</span></pre>
        <img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">

        <h5> Programmatic use API to process image: placeholder.getData(opts)</h5>
        <pre style="margin:20px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ddd 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;word-wrap:break-word;color:#444"><span style="color:#170">&lt;img</span> <span style="color:#00c">id</span>=<span style="color:#a11">"img_holder"</span> <span style="color:#00c">src</span>=<span style="color:#a11">""</span><span style="color:#170">&gt;</span><br><span style="color:#170">&lt;script</span> <span style="color:#00c">type</span>=<span style="color:#a11">"text/javascript"</span><span style="color:#170">&gt;</span><br>    var opts = {<br>        size: '256x128',<br>        font: {<br>            style: 'oblique',<br>        },<br>        text: 'Hello=<span style="color:#219">&amp;World'</span><br>    };<br>    document.getElementById('img_holder').setAttribute('src', window.placeholder.getData(opts));<br><span style="color:#170">&lt;/script</span><span style="color:#170">&gt;</span></pre>
        <img id="img_holder" src="">
        <script type="text/javascript">
            var opts = {
                size: '256x128',
                font: {
                    style: 'oblique',
                },
                text: 'Hello=&World'
            };
            document.getElementById('img_holder').setAttribute('src', window.placeholder.getData(opts));
        </script>
    </div>

</div>

<script>
    $('.picker').colpick({
        layout:'hex',
        submit:0,
        onChange:function(hsb,hex,rgb,el,bySetColor) {
            $(el).css({'border-color':'#'+hex,color:'#'+hex});
            if(!bySetColor) $(el).val(hex);
            var actionName = $(el).data('action');
            var action = actionList[actionName];
            if ($.isFunction(action)) action(el,$(el).val());
        }
    }).keyup(function(){
        $(this).colpickSetColor(this.value);
    });

    $(document).ready(function () {
        actionList.render();
    });


    $('[data-action]').change(function () {
        var actionName = $(this).data('action');
        var action = actionList[actionName];
        if ($.isFunction(action)) action($(this),$(this).val());
    });

    var actionList = {
        height:512,
        widht:316,
        options:{
            size: '512x316',
            bgcolor: '#ccc',
            color: '#969696',
            text: 'Generator',
            fstyle:'oblique',
            fweight: 'bold',
            fsize:undefined,
            ffamily: 'consolas'
        },
        changeToNumber:function(event,val){
            val = val.replace(/\D/g,"");
            if(event.val()!=val){
                event.val(val);
            }
        },
        'widthChange': function (event,val) {
            actionList.changeToNumber(event,val);
            actionList.width = val;
            actionList.options.size = val+"x"+actionList.height;
            actionList.render();
        },
        'heightChange': function (event,val) {
            actionList.changeToNumber(event,val);
            actionList.height = val;
            actionList.options.size = actionList.widht+"x"+val;
            actionList.render();
        },
        'bgcolorChange':function(event,val){
            actionList.options.bgcolor = "#"+val;
            actionList.render();
        },
        'colorChange':function(event,val) {
            actionList.options.color = "#"+val;
            actionList.render();
        },
        'fstyleChange':function(event,val) {
            actionList.options.fstyle = val;
            actionList.render();
        },
        'fweightChange':function(event,val) {
            actionList.options.fweight = val;
            actionList.render();
        },
        'fsizeChange':function(event,val) {
            if(val!="automation")
            actionList.changeToNumber(event,val);
            actionList.options.fsize = val;
            actionList.render();
        },
        'ffamilyChange':function(event,val) {
            actionList.options.ffamily = val;
            actionList.render();
        },
        'textChange': function (event,val) {
            actionList.options.text = val;
            actionList.render();
        },
        render:function(){
            $('#generat-img').attr('src', window.placeholder.getData(actionList.options));
        }
    };

    $('.options li').click(function(){
        var input = $(this).parent().parent().parent().find('input');
        input.val($(this).html());
        var actionName = input.data('action');
        var action = actionList[actionName];
        if ($.isFunction(action)) action(input,input.val());
        $(this).parent().parent().blur();
    });

    $('.open-select').focus(function(){
        $(this).find('.options').show();
        $('#fweigth-options').show();
    }).blur(function(){
        $(this).find('.options').hide();
    });


</script>

</body>

</html>
